<template>
	<view style="padding-bottom: 100rpx;">
		<view class="boxa">
			<view v-for="(addr,aindex) in orderInfo.addressList" :key="addr.addressId">
				<view class="addbox margin-lr" :class="{'padding-bottom-xl':aindex != orderInfo.addressList.length-1}">
					<view class="add_cont">
						<view class="green" v-if="aindex == 0"></view>
						<view class="orgin" v-else-if="aindex == orderInfo.addressList.length-1"></view>
						<view class="gray" v-else></view>
						<view>
							<view class="add_tit">{{addr.address}}</view>
							<view class="flex align-center">
								<view class="add_tit margin-top-xs">{{addr.userName}}</view>
								<view class="add_tit margin-left-xl margin-top-xs d-flex d-flex-middle" @click="callPhone(addr.userPhone)">
									<image style="width: 40rpx;height: 40rpx; margin-right: 6rpx;" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/dianhua.png"></image>
									<text>{{addr.userPhone}}</text>
								</view>
							</view>
						</view>
					</view>
					<view @click="openMap(addr.lat,addr.lng,addr.address)">
						<image :src="aindex != (orderInfo.addressList.length -1)?'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/image/ladd.png':'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/image/hadd.png'" style="width: 30rpx;height: 35rpx;"></image>
					</view>
				</view>
			</view>
			<!-- <view v-show="orderInfo.startAddress" @click="openMap(orderInfo.startLat,orderInfo.startLng,orderInfo.startAddress)" class="addbox  margin-lr padding-bottom-xl">
				<view class="add_cont">
					<view class="green"></view>
					<view>
						<view class="add_tit">{{orderInfo.startAddress}}</view>
						<view class="flex align-center">
							<view class="add_tit margin-top-xs">{{orderInfo.startUserName}}</view>
							<view class="add_tit margin-left-xl margin-top-xs">{{maskPhoneNumber(orderInfo.startUserPhone)}}</view>
						</view>
					</view>
				</view>
				<view>
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/image/ladd.png" style="width: 30rpx;height: 35rpx;"></image>
				</view>
			</view>
			<view v-show="orderInfo.endAddress" @click="openMap(orderInfo.endLat,orderInfo.endLng,orderInfo.endAddress)" class="addbox  margin-lr">
				<view class="add_cont">
					<view class="orgin"></view>
					
					<view>
							<view class="add_tit">{{orderInfo.endAddress}}</view>
							<view class="flex align-center">
								<view class="add_tit margin-top-xs">{{orderInfo.endUserName}}</view>
								<view class="add_tit margin-left-xl margin-top-xs">{{maskPhoneNumber(orderInfo.endUserPhone)}}</view>
							</view>
						</view>
				</view>
				<view>
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/image/hadd.png" style="width: 30rpx;height: 35rpx;"></image>
				</view>
			</view> -->
			
			
			<view class="margin-tb" style="width: 100%;height:1rpx;background: #F2F2F2;"></view>
			<view v-show="orderInfo.distance" class="flex align-center justify-between padding-lr ">
				<view class="margin-left-xs text-gray">距离货地<text
						style="color: #333333;font-size: 38rpx;">{{setDistance(orderInfo.distance)}}</text>{{orderInfo.distance>1?'km':'m'}}
				</view>
				<!-- <view class="flex align-center">预估
					<view style="color: #FF2020;font-size: 32rpx;">
						<text>¥</text><text class="text-bold" style="font-size: 42rpx;">12</text>
					</view>
				</view> -->
				<!-- <view class="flex align-center" style="color: #999999;">全程
					<view style="color: #333333;font-size: 38rpx;">
						50
					</view>
					km
				</view> -->
			</view>
		</view>
		<view class="box padding" style="color: #1C1C1C;">
			<view class="titls">接单信息</view>

			<view class="flex align-center justify-between margin-top">
				<view class="text-gray">预约时间</view>
				<view v-if="orderInfo.indentType==2">{{orderInfo.hopeTime}}</view>
				<view v-else>立即用车</view>
			</view>
			<view v-if="orderInfo.peopleNum" class="flex align-center justify-between margin-top">
				<view class="text-gray">跟车人数</view>
				<view>{{orderInfo.peopleNum}}人</view>
			</view>
			<view v-if="orderInfo.shipUserPhone" class="flex align-center justify-between margin-top">
				<view class="text-gray">联系方式</view>
				<view>{{maskPhoneNumber(orderInfo.shipUserPhone)}}</view>
			</view>
			<view v-if="orderInfo.modelName" class="flex align-center justify-between margin-top">
				<view class="text-gray">订单车型</view>
				<view>{{orderInfo.modelName}}</view>
			</view>
			<view v-if="orderInfo.typeName" class="flex align-center justify-between margin-top">
				<view class="text-gray">订单车厢</view>
				<view>{{orderInfo.typeName}}</view>
			</view>

			<view v-if="orderInfo.remarks" class="flex align-center justify-between margin-top">
				<view class="text-gray">订单备注</view>
				<view>{{orderInfo.remarks}}</view>
			</view>
		</view>
		<view class="box " style="color: #1C1C1C;">
			<view class="titls">订单信息</view>
			<view v-if="orderInfo.indentNumber" class="flex align-center justify-between margin-top">
				<view class="text-gray">订单号码</view>
				<view>{{orderInfo.indentNumber}}</view>
			</view>
			<view v-if="orderInfo.createTime" class="flex align-center justify-between margin-top">
				<view class="text-gray">下单时间</view>
				<view>{{orderInfo.createTime}}</view>
			</view>
			<view v-if="orderInfo.modeOfPayment" class="flex align-center justify-between margin-top">
				<view class="text-gray">支付方式</view>
				<view v-if="Number(orderInfo.modeOfPayment) == 0">余额支付</view>
				<view v-if="Number(orderInfo.modeOfPayment) == 1">微信支付</view>
				<view v-if="Number(orderInfo.modeOfPayment) == 2">支付宝支付</view>
			</view>
		</view>
		<view v-if="orderInfo.riderMoney" class="box padding flex align-center justify-between">
			<view class="text-lg text-bold">费用合计</view>
			<view class=" text-bold" style="color: #FF4B36;font-size: 38rpx;">￥{{orderInfo.riderMoney}}</view>
		</view>
		<view class="taber">
			<view class="btn" @click="getOrder()">接单</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indentId: '',
				latitude: '',
				longitude: '',
				orderInfo: {
					addressList:[]
				},
				arr:[]
			}
		},
		onLoad(option) {
			let that = this
			that.$Request.getT('/app/common/type/338').then(res => { //师傅新订单通知
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.arr.push(res.data.value)
					}
				}
			})
			that.$Request.getT('/app/common/type/268').then(res => { //订单状态通知
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.arr.push(res.data.value)
					}
				}
			})
			if (option.indentId) {
				that.indentId = option.indentId
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						that.latitude = res.latitude
						that.longitude = res.longitude
						that.getOrderInfo()
					}
				});
			} else {
				uni.showModal({
					title: '提示',
					content: '当前订单异常，请重新选择',
					showCancel: false,
					complete(ret) {
						if (ret.confirm) {
							uni.navigateBack()
						}
					}
				})
			}
		},
		methods: {
			//加密中间四位
			maskPhoneNumber(phoneNumber) {
				// 将手机号码转换为字符串类型，并根据其长度确定要替换的位数
				if (phoneNumber) {
					phoneNumber = phoneNumber.toString() //先强制转换成字符串类型
					return phoneNumber.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
				}

			},
			//打开导航
			openMap(latitude, longitude, address) {
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					address: address,
					name: address
				})
			},
			//接单
			getOrder() {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				let that = this
				
				uni.showModal({
					title: '提示',
					content: '确认接单吗？',
					complete(ret) {
						if (ret.confirm) {
							let data = {
								indentId: that.indentId
							}
							that.$Request.postT('/app/indent/indentReceiving', data).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '接单成功'
									})
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/order/order'
										})
									}, 1000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				})

			},
			openMap(latitude, longitude, name) {
				uni.openLocation({
					latitude: latitude - 0, //要去的纬度-地址       
					longitude: longitude - 0, //要去的经度-地址
					name: name, //地址名称
					address: name, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				});
			},
			//换算距离
			setDistance(val) {
				let num = 0
				if (Number(val) < 1) {
					num = (parseFloat(this.orderInfo.distance) * 1000).toFixed(2)
				} else {
					num = val
				}
				return num
			},
			callPhone(phone){
				uni.showModal({
					title: '联系车司机',
					content: '为得到更优质服务!拨通电话后请说明来小丽花！',
					confirmText: '立即拨打',
					confirmColor: '#1FC657',
					success: function(res) {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: phone
							})
						}
					}
				});
			},
			//获取定档详情
			getOrderInfo() {
				let data = {
					indentId: this.indentId,
					lng: this.longitude,
					lat: this.latitude
				}
				this.$Request.getT('/app/indent/riderGetIndentInfo', data).then(res => {
					if (res.code == 0) {
						this.orderInfo = res.data
					}
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #F5F5F5;
	}


	.box {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 30rpx;
		margin: 30rpx;

	}

	.boxa {
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 30rpx;
		padding: 30rpx 0;
	}


	.addbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 16rpx;

	}

	.add_cont {
		display: flex;
		align-items: center;
	}

	.add_tit {
		font-size:30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.green {
		width: 16rpx;
		height: 16rpx;
		background: #1FC657;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.gray {
		width: 16rpx;
		height: 16rpx;
		background: #cccccc;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.orgin {
		width: 16rpx;
		height: 16rpx;
		background: #FBAC04;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.user {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 30rpx;
		margin: 30rpx;
		display: flex;
		align-items: center;

	}

	.taber {
		background: #FFFFFF;
		padding: 10rpx 30rpx;
		position: fixed;
		bottom: 0;
		left: 0rpx;
		right: 0rpx;
		z-index: 99;

		.btn {
			height: 78rpx;
			background: #02B595;
			border-radius: 16rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>